<template>
  <div class="course_visualization">
    <Header />

    <div class="container">
      <div class="title">学生课程学习数据</div>
      <div id="chart1" />
      <div class="title">直播数据</div>
      <div id="chart2" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref } from "vue";
import { useRoute } from "vue-router";
import { courseLearnData } from "@/api/course/index";
import { liveStreamingData } from "@/api/liveStreaming/index";

const route = useRoute();

const courseId = route.query.id;

let chart1 = ref();
let chart2 = ref();

const videoNameList = ref<any>([]);
const videoPersonList = ref<any>([]);
const totalLearnPerosn = ref(0);

const msgCountList = ref<any>([]);
const userCountList = ref<any>([]);
const liveStreamingNameList = ref<any>([]);

function init() {
  chart1.value = echarts.init(
    document.getElementById("chart1"),
    "purple-passion"
  );
  chart2.value = echarts.init(
    document.getElementById("chart2"),
    "purple-passion"
  );
}

async function courseLearnDataFun() {
  const res = await courseLearnData({ courseId: courseId });

  if (res.code == 200) {
    res.data.videoList?.forEach((t: any) => {
      videoNameList.value.push(t.name);
      videoPersonList.value.push(t.count);
    });
    totalLearnPerosn.value = res.data.totalCount;

    const option1 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          crossStyle: {
            color: "#999"
          }
        }
      },
      legend: {
        data: ["视频观看人数"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "category",
        name: "名称",
        data: videoNameList.value,
        // axisTick: {
        //   alignWithLabel: true
        // }
        axisLabel: {
          interval: 0, //隔几项显示一个标签
          rotate: "45" //标签倾斜的角度，旋转的角度是-90到90度
        }
      },
      yAxis: {
        type: "value",
        name: "课程学习的总人数",
        max: totalLearnPerosn.value,
        interval: 1,
        min: 0,
        axisLabel: {
          formatter: "{value} 人"
        }
      },
      series: [
        {
          data: videoPersonList.value,
          type: "bar",
          name: "视频观看人数",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)"
          }
        }
      ]
    };

    chart1.value.setOption(option1);
  }
}

async function liveStreamingDataFun() {
  const res = await liveStreamingData({ courseId: courseId });

  if (res.code === 200) {
    res.data?.forEach((t: any) => {
      msgCountList.value.push(t.msgCount);
      userCountList.value.push(t.userCount);
      liveStreamingNameList.value.push(t.roomName);
    });
    const option2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999"
          }
        }
      },
      grid: {
        left: "3%",
        right: "0%",
        bottom: "3%",
        containLabel: true
      },
      toolbox: {},
      legend: {
        data: ["直播观看人数", "直播间消息数量"]
      },
      xAxis: [
        {
          type: "category",
          data: liveStreamingNameList.value,
          // name: "名称",
          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "直播观看人数",
          min: 0,
          // max: 250,
          interval: 1,
          axisLabel: {
            formatter: "{value} 人"
          }
        },
        {
          type: "value",
          name: "直播间消息数量",
          min: 0,
          // max: 25,
          interval: 1,
          axisLabel: {
            formatter: "{value} 条"
          }
        }
      ],
      series: [
        {
          name: "直播观看人数",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: any) {
              return value + "人";
            }
          },
          data: userCountList.value
        },
        {
          name: "直播间消息数量",
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value: any) {
              return value + "条";
            }
          },
          data: msgCountList.value
        }
      ]
    };

    chart2.value.setOption(option2);
  }
}

onMounted(() => {
  courseLearnDataFun();
  liveStreamingDataFun();
  init();
});

onUnmounted(() => {
  chart1.value.dispose();
  chart2.value.dispose();
});
</script>

<style lang="scss" scoped>
.course_visualization {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);

  .container {
    width: 1200px;
    min-height: 300px;
    margin: 20px auto;
    background-color: var(--bg-color);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    padding-bottom: 100px;

    .title {
      width: 100%;
      text-align: center;
      margin-bottom: 30px;
      height: 60px;
      line-height: 60px;
      font-size: 25px;
      border-bottom: 1px dashed #ccc;
      border-top: 1px dashed #ccc;
    }

    #chart1,
    #chart2 {
      width: 1000px;
      height: 500px;
      margin-bottom: 20px;
    }
  }
}
</style>
